<template>
  <div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width: 100%; max-width: 1200px">
        <div class="content">
          <div class="right-box">
            <!-- menu栏 -->
            <m-Menu activeDefault="4"></m-Menu>
            <!--  -->
          </div>
          <div class="left-box" v-loading="$store.state.isLoading">
            <div class="top">
              <i
                class="el-icon-back"
                style="
                  font-size: 30px;
                  margin-right: 10px;
                  cursor: pointer;
                  margin-top: 10px;
                "
                @click="$router.push('/timecount')"
              ></i>
              <div class="title">学习统计时长/{{ userName }}</div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane label="赛项资源" name="2"></el-tab-pane>
              <el-tab-pane label="1+X证书" name="3"></el-tab-pane>
              <el-tab-pane label="技能培训" name="5"></el-tab-pane>
              <el-tab-pane label="金职大讲堂" name="1"></el-tab-pane>
              <el-tab-pane label="行业资源" name="4"></el-tab-pane>
            </el-tabs>
            <div class="bottom">
              <el-table
                :data="tableData"
                style="width: 100%; margin-top: 10px; min-height: 300px"
                :header-cell-style="{ background: '#E4EEFF', color: '#333333' }"
              >
                <el-table-column
                  prop="allocationTitle"
                  label="资源名称"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="学习总时长" align="center">
                  <template slot-scope="scope">
                    {{
                      moment
                        .utc(scope.row.watchedTime * 1000)
                        .format("HH时mm分ss秒")
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="latestTime"
                  label="最近学习时间"
                  align="center"
                >
                </el-table-column>
                <div slot="empty" class="empty">
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </el-table>
            </div>
          </div>
        </div>
        <div class="clearfix">
          <el-pagination
            class="pull-right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total,prev,pager,next,sizes,jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { STATUS_CODE_OK } from "@/config";
import { learnDetails } from "@/api/personalCenter.js";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
import MMenu from "@/components/MMenu.vue";
export default {
  name: "LearningDetails",
  data() {
    return {
      isPageShow: true, //页面是否显示
      dataList: {},
      activeName: "1",
      moment,
      userId: "",
      tableData: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      currentPage: 1, // 页数
      pageSize: 5, // 条数
      totalCount: 0, // 总条数
    };
  },
  async created() {
    await this.handleLocalGetData();
    this.handleListLearnDetails();
  },
  methods: {
    // tab栏切换
    handleTabClick() {
      console.log(this.pageSize, this.currentPage, "handleTabClick");
      this.pageSize = 5;
      this.currentPage = 1;
      this.handleListLearnDetails();
    },
    // 获取本地基本详情数据
    handleLocalGetData() {
      if (this.$route.params.row) {
        sessionStorage.setItem(
          "learningDetails",
          JSON.stringify(this.$route.params.row)
        );
      }
      this.userId = JSON.parse(
        sessionStorage.getItem("learningDetails")
      ).userId;
      this.userName = JSON.parse(
        sessionStorage.getItem("learningDetails")
      ).studentName;
    },
    // 获取详情数据
    async handleListLearnDetails() {
      let { data } = await learnDetails({
        userId: this.userId,
        type: this.activeName,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      if (data.code == STATUS_CODE_OK) {
        this.tableData = data.data.records;
        this.totalCount = Number(data.data.total);
      }
    },
    // 分页页数改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleListLearnDetails(true);
    },
    // 分页当前页改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleListLearnDetails();
    },
  },
  components: {
    // MHeader,
    // MFotter,
    MMenu,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
.input {
  width: 220px;
  margin-left: 20px;
}

.dialog-box {
  .pdf-box {
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: center;
    .pdf {
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  }
  .dialog-video {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
}
.wrap {
  background-color: $bg-color;
  .container {
    padding-bottom: 90px;
    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .right-box {
        flex: 0.2;
        border-radius: 10px 10px 10px 10px;
        background: #fff;
        .el-menu {
          border-right: none;
        }
      }
      .left-box {
        flex: 0.8;
        margin: 0px 0px 0px 20px;
        padding: 0px 20px 70px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px 10px 10px 10px;
        .top {
          display: flex;
          align-items: center;
          .title {
            padding: 20px 0px 10px 0px;
          }
          .search {
            .name {
              margin-left: 20px;
            }
            .btn {
              margin-left: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
